<template>
  <view>
    <uv-input
      v-model="currentLabel"
      :placeholder="placeholder"
      disabled
      disabled-color="#ffffff"
      suffix-icon="arrow-right"
      suffix-icon-style="color: #BDBDBD"
      @click="showSelect"
    />
    <uv-popup ref="gselectRef" :mode="position" @maskClick="closeSelect">
      <view>
        <uv-toolbar
          :confirm-color="activeColor"
          :title="title"
          @cancel="closeSelect"
          @confirm="confirmSelect"
        />
        <uv-search
          v-if="search"
          placeholder="请输入关键字"
          v-model="keyword"
          :show-action="false"
          :maxlength="50"
          margin="auto 30rpx 30rpx"
        />
        <scroll-view scroll-y style="height: 40vh" v-if="mode == 'radio'">
          <uv-radio-group
            v-model="selectId"
            placement="column"
            icon-placement="right"
            :active-color="activeColor"
          >
            <uv-radio
              v-for="i in filterDataList"
              :key="i[keyValue]"
              :name="i[keyValue]"
              :label="i[keyName]"
              :disabled="disabledId ? i[keyValue] === disabledId : false"
              :label-color="selectId === i[keyValue] ? activeColor : '#303133'"
              :custom-style="{
                padding: '20rpx',
              }"
            />
          </uv-radio-group>
        </scroll-view>
        <scroll-view scroll-y style="height: 40vh" v-if="mode == 'checkbox'">
          <uv-checkbox-group
            v-model="selectId"
            placement="column"
            border-bottom
            icon-placement="right"
            :active-color="activeColor"
          >
            <uv-checkbox
              v-for="i in filterDataList"
              :key="i[keyValue]"
              :name="i[keyValue]"
              :label="i[keyName]"
              :disabled="disabledId ? i[keyValue] === disabledId : false"
              :label-color="selectId?.includes(i[keyValue]) ? activeColor : '#303133'"
              :custom-style="{
                padding: '20rpx',
              }"
            />
          </uv-checkbox-group>
        </scroll-view>
      </view>
    </uv-popup>
  </view>
</template>
<script setup>
import { ref, computed, watch } from "vue";
const props = defineProps({
  // 绑定的值
  value: {
    type: [String, Number, Array],
    default: "",
  },
  // 数据列表
  list: {
    type: Array,
    default: () => [],
  },
  // 单选radio / 多选checkbox
  mode: {
    type: String,
    default: "radio",
  },
  // 选择器弹出方向
  position: {
    type: String,
    default: "bottom",
  },
  // 弹窗标题
  title: {
    type: String,
    default: "",
  },
  // 占位提示
  placeholder: {
    type: String,
    default: "请选择",
  },
  // 显示字段
  keyName: {
    type: String,
    default: "label",
  },
  // 读取value值
  keyValue: {
    type: String,
    default: "value",
  },
  // 显示搜索框
  search: {
    type: Boolean,
    default: true,
  },
  // 禁止项ID
  disabledId: {
    type: [String, Number],
    default: "",
  },
  // 选中颜色
  activeColor: {
    type: String,
    default: "#4EA770"
  }
});
const emit = defineEmits(["update:value", "change"]);

watch(
  props,
  () => {
    setTimeout(() => {
      currentValue.value = props.value;
      if (props.mode == "radio") {
        let row = props.list.find((i) => {
          return (
            i[props.keyValue] === currentValue.value &&
            typeof i[props.keyValue] === typeof currentValue.value
          );
        });
        currentLabel.value = row ? row[props.keyName] : currentValue.value;
      } else {
        let labels = props.value.map(
          (i) =>
            props.list.find((a) => {
              return a[props.keyValue] === i && typeof a[props.keyValue] === typeof i;
            })[props.keyName]
        );
        if (labels && labels.length > 0) {
          currentLabel.value = labels.join(",");
        }
      }
    }, 0);
  },
  { immediate: true, deep: true }
);

const currentValue = ref(); // 选中值
const currentLabel = ref(); // 选择显示名称

const gselectRef = ref(); // 获取组件实例
const selectId = ref(); // 选择器ID
const keyword = ref(""); // 过滤内容

// 过滤后的数据
const filterDataList = computed(() => {
  return props.list?.filter((i) => {
    return i[props.keyName].includes(keyword.value);
  });
});

// 打开选择器弹窗
const showSelect = () => {
  gselectRef.value.open();
  selectId.value = currentValue.value;
};

// 关闭选择器弹窗
const closeSelect = () => {
  gselectRef.value.close();
  selectId.value = props.mode == "radio" ? null : [];
};

// 确认选择
const confirmSelect = () => {
  currentValue.value = selectId.value;
  if (props.mode == "radio") {
    let row = props.list.find((i) => {
      return (
        i[props.keyValue] === selectId.value &&
        typeof i[props.keyValue] === typeof selectId.value
      );
    });
    currentLabel.value = row ? row[props.keyName] : selectId.value;
    if (row) {
      emit("update:value", selectId.value);
      emit("change", row);
    }
  } else {
    let labels = selectId.value.map(
      (i) =>
        props.list.find((a) => {
          return a[props.keyValue] === i && typeof a[props.keyValue] === typeof i;
        })[props.keyName]
    );
    if (labels && labels.length > 0) {
      currentLabel.value = labels.join(",");
      emit("update:value", selectId.value);
      emit("change", {
        value: selectId.value,
        label: labels,
      });
    }
  }
  closeSelect();
};
</script>
<style lang="scss" scoped>
.uv-radio {
  border: 2rpx solid #dcdfe6 !important;
  padding: 20rpx 40rpx !important;
  border-radius: 10rpx !important;
  margin: 10rpx 20rpx !important;
}
</style>
